<template>

    <van-nav-bar title="首页" />
    <van-tabs v-model:active="animated">
        <van-tab title="标签 1">
            <lb :image="image"></lb>
            <div class="jjb">
                <div><img src="../../../img/001.png" alt=""> 华为商品</div>
                <div><img src="../../../img/002.png" alt=""> 华为商品</div>
                  <div><img src="../../../img/001.png" alt=""> 华为商品</div>
                <div><img src="../../../img/002.png" alt=""> 华为商品</div>
                  <div><img src="../../../img/001.png" alt=""> 华为商品</div>
                <div><img src="../../../img/002.png" alt=""> 华为商品</div>
                  <div><img src="../../../img/001.png" alt=""> 华为商品</div>
                <div><img src="../../../img/002.png" alt=""> 华为商品</div>
                  <div><img src="../../../img/001.png" alt=""> 华为商品</div>
                <div><img src="../../../img/002.png" alt=""> 华为商品</div>
                  <div><img src="../../../img/001.png" alt=""> 华为商品</div>
                <div><img src="../../../img/002.png" alt=""> 华为商品</div>
            </div>
        </van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>

</template>

<script setup>
import lb from '@/components/lb.vue';
const image = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
</script>

<style >
.jjb{
    width: 100%;height: 100%;
    div{
        display: inline-block;
        column-count: 2;
        column-gap: 20px;
      img{
       width: 100%;height: 100%;
       margin-bottom: 20px;
      } 
    }
}
</style>